<script setup>
import { httpRequest } from "../../utils/http";
import { computed, ref, reactive} from "vue";
import { onShow, onUnload } from "@dcloudio/uni-app";
import btnModule from "../../components/index/btnModule.vue";
import aipCheckbox from "../../components/index/aip-checkbox.vue"
const videoArr = ref([])
const taskName = ref('')
const musicCate = ref([])
const master = ref('')
const pub = ref('')
const focu = ref(false)
const selectedMusic = ref(1)
const colorList = [
  {
  id:1,
  img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_07.png',
  bgc:'',
  ttfs:'mksj.ttf',
  color:'#ffe81d',
  strokeColor:'#000000'
  },
  {
    id:2,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_08.png',
    bgc:'',
    ttfs:'mksj.ttf',
    color:'#fe679d',
    strokeColor:'#ffffff'
  },
  {
    id:3,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_09.png',
    bgc:'',
    ttfs:'mksj.ttf',
    color:'#000000',
    strokeColor:'#ffffff'
  },
  {
    id:4,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_10.png',
    bgc:'',
    ttfs:'W8.TTF',
    color:'#ffe81d',
    strokeColor:'#000000'
  },
  {
    id:5,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_11.png',
    bgc:'',
    ttfs:'W8.TTF',
    color:'#fe679d',
    strokeColor:'#ffffff'
  },
  {
    id:6,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_12.png',
    bgc:'',
    ttfs:'W8.TTF',
    color:'#000000',
    strokeColor:'#ffffff'
  },
  {
    id:7,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_13.png',
    bgc:'',
    ttfs:'txjz.ttf',
    color:'#ffe81d',
    strokeColor:'#000000'
  },
  {
    id:8,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_14.png',
    bgc:'',
    ttfs:'txjz.ttf',
    color:'#fe679d',
    strokeColor:'#ffffff'
  },
  {
    id:9,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_15.png',
    bgc:'',
    ttfs:'txjz.ttf',
    color:'#000000',
    strokeColor:'#ffffff'
  },
  {
    id:10,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_01.png',
    bgc:'#ffdf02',
    ttfs:'wyW8.TTF',
    color:'#000000',
    strokeColor:''
  },
  {
    id:11,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_02.png',
    bgc:'#ffdf02',
    ttfs:'ztq.ttf',
    color:'#000000',
    strokeColor:''
  },
  {
    id:12,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_03.png',
    bgc:'#ffdf02',
    ttfs:'yssyftjkt.ttf',
    color:'#000000',
    strokeColor:''
  },
  {
    id:13,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_04.png',
    bgc:'#FFFFFF',
    ttfs:'yssyftjkt.ttf',
    color:'#000000',
    strokeColor:'#000000'
    },
    {
    id:14,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_05.png',
    bgc:'#FFFFFF',
    ttfs:'ztq.ttf',
    color:'#000000',
    strokeColor:'#000000'
    },
    {
    id:15,
    img:'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kbyshi_yshi_06.png',
    bgc:'#FFFFFF',
    ttfs:'wyW8.TTF',
    color:'#000000',
    strokeColor:'#000000'
    },
  
];
const textList = ref([])
textList.value = uni.getStorageSync('textList')
const line = reactive(
    [
        [],[],[],[],[],[],[],[],[],[],[]
    ]
)
let x = 0
let n = 0
textList.value.forEach(e=>{
      if(n%3==0&&n!=0)x++
      line[x].push(e)
      n++
  })
  line.value = line.filter(e=>e.length)
  console.log(line.value);

onShow(()=>{
  getCover()
  getTask()
})

 const getTask = async() => {
  const res = await httpRequest("/api/findTaskStart", "POST", {
      businessId: uni.getStorageSync("business").businessId,
    });
    if(res.data.type=='pub')pub.value = 1
    if(res.data.type=='master2')master.value = 2
 }

const getCurrentTimestamp = () => {
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  const timestamp = hours * 3600 + minutes * 60 + seconds;
  return timestamp;
}
const currentDate = () => {
  const date = new Date();
  return `${date.getMonth() + 1}月${date.getDate()}日`;
};

taskName.value = currentDate() + "剪辑任务"+getCurrentTimestamp()
  uni.setStorageSync("name", taskName.value);
const getVideos = async() => {
  const res = await httpRequest('/api/getVideosOne2','POST',{
    businessId: uni.getStorageSync("business").businessId,
    type:uni.getStorageSync('up')?'up':''
  })
  console.log(res);
  if(!res.data.length){
    videoArr.value = []
  }else{
    res.data.forEach(e=>{
      videoArr.value = [...videoArr.value,...e.lists.map(e=>e.url)]
    })
  }
}
getVideos()

const getMusicCate = async() => {
  const res = await httpRequest('/api/musicCateList','POST')
  console.log(res);
  musicCate.value = res.data
  selectedMusic.value = res.data[0].id
  musicCate.value.unshift({
    id:0,
    name:'无'
  })
}
getMusicCate()
const changeMusic = (e) => {
  console.log(e.detail);
  selectedMusic.value = musicCate.value[Number(e.detail.value)].id
}

const color = ref([])
const size = ref([])
const colorChecked = ref(false)
const chooseSize = (i) => {
    if (size.value.includes(i)) {
    size.value = size.value.filter((e) => e != i);
    (size.value.length==15)?colorChecked.value = true:colorChecked.value = false
    color.value = color.value.filter(e=>e.id != colorList[i].id)
    console.log(color.value);
    return;
  }
  uni.vibrateShort()
  size.value.push(i)
  color.value.push(colorList[i])
  console.log(color.value);
  console.log(size.value);

  if(size.value.length==15){
    colorChecked.value = true
  }else{
    colorChecked.value = false
  }
}

//全部随机
const randomAll = (e) => {
  console.log(e.detail);
  if(e.detail.value.length){
    size.value = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]
    color.value = colorList;
  }else{
    size.value = []
    color.value = []
  }
};
const fontColor = ref()
const openFontColor = () => {
    fontColor.value.open('bottom')
}

const isCover = ref(false)
const getCover = async() => {
  const res = await httpRequest('/api/getVideo1FpsSave','POST',{
    businessId:uni.getStorageSync("business").businessId,
  })
  if(!res.data){
    isCover.value = false
  }else{
    isCover.value = true
  }
}

const close = () => {
    fontColor.value.close()
}

const id = ref('')
const num = ref('')
const creatVideo = async() => {
    uni.showLoading({
      title: '请稍后',
      mask: false
    })
  const res = await httpRequest('/api/kaById','POST',{
    shopId: uni.getStorageSync("shop")[uni.getStorageSync('index')].shopId,
  }) 
    id.value = uni.getStorageSync("taskId");
  const color1 = color.value.length?color.value:[colorList[0]]
  const text = uni.getStorageSync('textList').map(e=>{
        return {
                content:e
            }
  })
  // const text = uni.getStorageSync('textList').map(e=>{
  //       return[
  //           {
  //               content:e
  //           }
  //       ]
  // })
  console.log(text);
  const resTime = await httpRequest('/api/clipVideoTime2','POST',{
    businessId:uni.getStorageSync("business").businessId
  })
  if(!sound.value) sound.value = soundList.value[0]
  
  let commands = ''
    //获取切片时长和最大生成数量
  if(master.value){
    const tres = await httpRequest("/api/getVoiceVideoMaxNum2", "POST", {
    businessId: uni.getStorageSync("business").businessId,
    taskId: id.value,
    time:Math.floor(resTime.data),
    fontColor:JSON.stringify(color1),
    text:JSON.stringify(text),
    soundNum:sound.value.number
  },1000000);
  uni.hideLoading()
  if(res.data.useNum<tres.data.maxNum)return uni.showToast({title:'剩余次数不足',icon:'none'}) 
  uni.setStorageSync("maxNum", tres.data.maxNum);
  num.value = tres.data.maxNum
  commands = tres.data.command
  }else if(pub.value){
    if(!topText.value){
    topText.value = textList.value[0]
  }
  if(topText.value.length>10){
    topText.value = topText.value.substring(0, 10); 
  }
    const tres = await httpRequest("/api/getVoiceVideoMaxNum3", "POST", {
    businessId: uni.getStorageSync("business").businessId,
    taskId: id.value,
    time:Math.floor(resTime.data),
    fontColor:JSON.stringify(color1),
    text:JSON.stringify(text),
    soundNum:sound.value.number,
    txtTitle:topText.value
  },1000000);
  uni.hideLoading()
  if(res.data.useNum<tres.data.maxNum)return uni.showToast({title:'剩余次数不足',icon:'none'}) 
  uni.setStorageSync("maxNum", tres.data.maxNum);
  num.value = tres.data.maxNum
  commands = tres.data.command
  }
  uni.showModal({
    title: `自动合成`,
    content:`本次合成视频数量 ${num.value} 条,合成需要花一定的时间,可稍后前往剪辑库列表查看最新成品`,
    cancelColor:"#909399",
    cancelText:'取消',
    confirmColor:"#8e54f4",
    confirmText:'确定',
    success: async(res) => {
      if(res.confirm){
            //显示loading
            uni.showLoading({
              title: "生成中",
            });
            try {
              await httpRequest('/api/editTaskName','POST',{
                taskId:id.value,
                taskName:taskName.value
              })
                const data = httpRequest('/api/clipVideosAccordingVoiceTime','POST',{
                    commands:JSON.stringify(commands),
                    cjs:uni.getStorageSync('textList').length,
                    businessId: uni.getStorageSync("business").businessId,
                    taskId: id.value,
                    musicCateId:selectedMusic.value
                },10000000)
                uni.hideLoading()
                uni.removeStorageSync('product')
                uni.removeStorageSync('videoArr')
                uni.removeStorageSync('copy')
                uni.removeStorageSync('v1')
                uni.removeStorageSync('v2')
                uni.removeStorageSync('v3')
                uni.removeStorageSync('v4')
                uni.removeStorageSync('v5')
                uni.removeStorageSync('v6')
                uni.removeStorageSync('v7')
                uni.removeStorageSync('maxNum')
                uni.removeStorageSync("color");
                uni.removeStorageSync('taskId')
                uni.removeStorageSync('same')
                uni.removeStorageSync('sameTitle')
                uni.removeStorageSync('prevPage')
                uni.removeStorageSync('notTime')
                uni.removeStorageSync('voiceArr')
                uni.removeStorageSync('isItem')
                uni.removeStorageSync('templateId')
                uni.removeStorageSync('isSwitch')
                uni.removeStorageSync('textList')
                uni.removeStorageSync('up')
                uni.removeStorageSync('num')
                uni.reLaunch({ url: `/pageA/index/preview?video=${id.value}&unsynthesized=${num.value}&name=${taskName.value}` });
                uni.removeStorageSync('name')
            } catch (error) {
                uni.hideLoading()
                console.log(error);
                uni.showToast({
                    title: '出错啦',
                    icon: 'error',
                    mask: true
                })
            }
        }
    }
})
}

const goWebview = () => {
  uni.navigateTo({ url: '/pageA/index/coverWeb' })
}

const goBack = () => {
  uni.redirectTo({ url: '/pageA/index/textVideo' })
}

const isFocus = ref(0)
const focus = (n) => {
    console.log(n);
    isFocus.value = n
}

const popupChangeTim = (e) => {
  audio.stop()
  audio = uni.createInnerAudioContext()
  soundList.value.forEach(e=>{
    e.play = false
  })
}

onUnload(()=>{
  if(audio){
    audio.stop()
    audio = ''
    audio = uni.createInnerAudioContext()
  }
})

// 获取音色数组
const soundList = ref([])
const getTimbre = async() => {
  const res = await httpRequest('/api/soundList','POST')
  console.log(res);
  soundList.value = res.data
  soundList.value.forEach(e=>{
    e.play = false
  })
}
getTimbre()
// 打开音色弹窗
const timbre = ref()
const getVoiceTimbre = () => {
  timbre.value.open('bottom')
}

//关闭音色弹窗 
const closeTim = () => {
  timbre.value.close()
}

// 点击音色item
const sound = ref('')
const timClick = (e) => {
  sound.value = e
}

// 音色名称字符串分割
const nameSplic = (e) => {
  return e.slice(-2)
}

// 试听
// const audio = ref('')
let audio = uni.createInnerAudioContext()
const audition = (e,i) => {
  audio.src = e.m4aPath
  if(e.play){
    soundList.value[i].play = false
    audio.stop()
    audio = uni.createInnerAudioContext()
  }else{
    soundList.value.forEach(e=>e.play=false)
    soundList.value[i].play = true
    audio.play()
  }
}
audio.onPlay(e=>{
  console.log('播放');
})
audio.onEnded(e=>{
  audio.stop()
  soundList.value.forEach(e=>e.play=false)
  audio = uni.createInnerAudioContext()
})
audio.onStop(e=>{
  console.log('停止');
})
audio.onError(e=>{
  console.log(e);
  console.log('播放错误');
})

const topCopy = ref()
const topText = ref('')
const openTopCopy = () => {
  topCopy.value.open('bottom')
}
const closeTop = () => {
  topCopy.value.close()
}
const popupChange = (e) => {
  
}
const changeInput = (e) => {
    if(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu.test(topText.value)) uni.showToast({title:'不可以输入特殊字符',icon:'none'})
    topText.value = topText.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu, "")
    console.log(topText.value);
}
const textClick = (e) => {
    if(isFocus.value==0)return
    if(isFocus.value==1)return topText.value = e
}
</script>

<template>
  <view class="page">
    <scroll-view class="videos" scroll-y>
        <view class="video-box">
            <text>场景数：{{textList.length}}个</text>
            <image @click="goBack" style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/zlsc_kbku_icon_xgai.png"/>
        </view>
        <view scroll-y class="scrolly">
            <video class="videoItem" v-for="item in videoArr" :src="item" :key="item"></video>
        </view>
    </scroll-view>
    <view class="item" style="display: block;height: auto;" v-if="pub">
      <view @click="openTopCopy" style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 40rpx;">
          <view class="flex-left">
            <image style="width: 40rpx;height: 40rpx;margin-right: 12rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_wagli.png"/>
            顶部文案
        </view>
        <view class="flex-right" style="color: rgb(142,84,244)">
            {{ topText? `已设置` : "去设置"}}
            <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouz.png"/>
        </view>
      </view>
        <view @click="openFontColor" style="display: flex;align-items: center;justify-content: space-between;">
          <view class="flex-left">
            <image style="width: 40rpx;height: 40rpx;margin-right: 12rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_ztyse.png"/>
            字体样式
        </view>
        <view class="flex-right">
            {{color.length?'已选择':'默认'}}
            <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"/>
        </view>
      </view>
        
        
    </view>
    <view v-else class="item" style="display: block;height: auto;">
      <view @click="openFontColor" style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 21rpx;">
          <view class="flex-left">
            <image style="width: 40rpx;height: 40rpx;margin-right: 12rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_ztyse.png"/>
            口播样式
        </view>
        <view class="flex-right">
            {{color.length?'已选择':'默认'}}
            <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"/>
        </view>
      </view>

      <view @click="getVoiceTimbre" style="display: flex;align-items: center;justify-content: space-between;">
          <view class="flex-left">
            <image style="width: 40rpx;height: 40rpx;margin-right: 12rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_kbyse.png"/>
            口播音色
        </view>
        <view class="flex-right">
            {{ sound? `已选择` : "默认"}}
            <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"/>
        </view>
      </view>
        
        
        
    </view>
    <view v-if="pub" class="item"  @click="getVoiceTimbre">
        <view class="flex-left">
            <image style="width: 40rpx;height: 40rpx;margin-right: 12rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_kbyse.png"/>
            口播音色
        </view>
        <view class="flex-right">
            {{sound?'已选择':'默认'}}
            <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"/>
        </view>
        
    </view>
    <view class="item">
        <view class="flex-left">
            <image style="width: 40rpx;height: 40rpx;margin-right: 12rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_bjyyue.png"/>
           背景音乐
        </view>
        <view class="flex-right">
            <picker mode="selector" style="width: 400rpx;height: 38rpx;display: flex;justify-content: flex-end;" :range="musicCate" range-key="name" 
            @change="changeMusic">
            <view class="uni-input">{{musicCate.length?musicCate[Number(musicChoose)].name:'动感'}}</view>
          </picker>
            <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"/>
        </view>
        
    </view>
    <view class="item" @click="goWebview">
        <view class="flex-left">
            <image style="width: 40rpx;height: 40rpx;margin-right: 12rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_jjk_icon_spfmian.png"/>
            封面样式
        </view>
        <view class="flex-right">
            {{isCover?'已上传':'去上传'}}
            <image style="width: 48rpx;height: 48rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_yjtouh.png"/>
        </view>
        
    </view>
    <view class="top">
      <view class="top-title">
        <view style="display: flex; justify-content: space-between; width: 100%">
          <view style="display: flex; align-items: center">
            <image
              style="width: 40rpx; height: 40rpx; margin-right: 12rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_hcszhi.png"
              mode="scaleToFill"
            />
            <text style="font-size: 32rpx; color: rgb(48, 49, 51); font-weight: 500"
              >合成设置</text
            >
          </view>
        </view>
      </view>
      <view class="top-content">
        <view class="top-material">
          <text style="font-size: 30rpx;">剪辑库名称</text>
          <view v-if="!focu" style="text-align: right;font-size: 30rpx;" @click="focu = true">{{ taskName }}</view>
          <input v-else focus="true" @blur="focu = false" style="text-align: right;font-size: 30rpx;" type="text" v-model="taskName">
        </view>
      </view>
    </view>
    <btnModule message="合成视频" @customClick="creatVideo" />
  </view>
  <uni-popup ref="fontColor" :safe-area="false" @change="popupChange">
    <view style="background-color: #fff; border-radius: 32rpx 32rpx 0 0">
      <view class="close">
        <image @click="close" class="close-btn" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png" mode="" />
        设置字体颜色
      </view>
      
      <view class="popup-middle">
        <view
        v-for="item,index in colorList"
        :key="item.id"
          @click="chooseSize(index)"
          :class="{ 'font-active': size.includes(index) }"
          class="font"
          ><image style="width: 186rpx;height: 80rpx;" :src="item.img"/>
          <image
            v-if="size.includes(index)"
            class="font-img"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_xzong.png"
          />
        </view>
      </view>
      <view class="verify">
        <checkbox-group @change="randomAll">
          <label>
            <checkbox style="transform: scale(0.7)" :value="1" :checked="colorChecked"/>全部随机
          </label>
        </checkbox-group>
        <button hover-class="hover" @click="close" class="verify-btn">确认选择</button>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="timbre" :safe-area="false" @change="popupChangeTim">
    <view style="background-color: #fff; border-radius: 32rpx 32rpx 0 0">
      <view class="close">
        <image @click="closeTim" class="close-btn" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png" mode="" />
        口播音色
      </view>
      <view class="popup-middle">
        <view class="tim-item" v-for="item,index in soundList" :key="index" @click="timClick(item)">
          <view style="margin-right: 30rpx;">
              <aip-checkbox :key="keys" :check="sound.id==item.id"></aip-checkbox>
          </view>
          <view class="tim-voice" :class="sound.id==item.id?'active-tem':''">
            <view class="tim-character">
              <view class="tim-name">{{nameSplic(item.name)}}</view>
              {{item.name}}
            </view>
            <view class="tim-play" @click="audition(item,index)">{{item.play?'正在播放':'试听'}}</view>
            <!-- <audio :src="item.m4aPath"></audio> -->
          </view>
          
        </view>
      </view>
      <btnModule message="确认" @customClick="closeTim"/>
    </view>
  </uni-popup>
  <uni-popup ref="topCopy" @change="popupChange">
    <view style="background-color: #fff; border-radius: 32rpx 32rpx 0 0">
      <view class="close">
        <image @click="closeTop" class="close-btn" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png" mode="" />
        顶部文案
      </view>
      <view class="popup-middle">
        <text  style="display: block;margin-bottom:30rpx;font-size: 24rpx;color: rgb(252,139,0);">提示：顶部文案最多输入10个字符</text>
        <scroll-view scroll-y style="height: 626rpx;">
        <input v-model="topText" :maxlength="10" @focus="focus(1)" :class="isFocus==1?'active-ipt':''" class="ipt" type="text" placeholder="请输入文字" />
              <scroll-view scroll-x class="texts">
                  <div class="lines" v-for="item,i in line" :key="i">
                      <div class="column" @click="textClick(e)" v-for="e,i in item" :key="i">{{ e }}</div>
                  </div>
              </scroll-view>
          </scroll-view>
      </view>
      <btnModule message="确认" @customClick="closeTop"/>
    </view>
  </uni-popup>
</template>
<style lang="scss">
.page{
    padding: 30rpx;
    box-sizing: border-box;
    padding-bottom: 200rpx;
    .videos{
        width: 100%;
        height: 460rpx;
        padding: 30rpx 30rpx 0 30rpx;
        margin-bottom: 30rpx;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 24rpx;
        .video-box{ 
            display: flex;
            justify-content: space-between;
            font-size: 32rpx;
            color: rgb(48,49,51);
            margin-bottom: 30rpx;
        }
        .videoItem{
            width: 190rpx;
            height: 190rpx;
            margin: 0 30rpx 30rpx 0;
            border-radius: 16rpx;
            &:nth-child(3n){
                margin: 0 0 30rpx 0;
            }
        }
    }
    .item{
        width: 100%;
        height: 132rpx;
        border-radius: 16rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        margin-bottom: 30rpx;
        padding: 30rpx;
        box-sizing: border-box;
        .flex-left{
            display: flex;
            align-items: center;
            font-size: 32rpx;
            color: rgb(48,49,51);
        }
        .flex-right{
            display: flex;
            align-items: center;
            font-size: 28rpx;
            color: rgb(144,147,153);
            .uni-input{
              width: 400rpx;
              height: 38rpx;
              font-size: 28rpx;
              text-align: right;
              color: #909399;
            }
        }
    }

    .top {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    .top-title {
      display: flex;
      align-items: center;
      padding: 42rpx 30rpx;
      .uni-input{
        width: 600rpx;
        height: 70rpx;
        font-size: 28rpx;
        text-align: right;
        color: #909399;
      }
    }
    .number {
      box-sizing: border-box;
      padding: 0 30rpx 30rpx;
      overflow-x: scroll;
      white-space: nowrap;

      .video-box {
        position: relative;
        display: inline-block;
        width: 160rpx;
        height: 138rpx;
        text-align: center;
        line-height: 138rpx;
        font-size: 28rpx;
        color: rgb(69, 70, 74);
        background-color: rgb(250, 245, 255);
        border-radius: 12rpx;
        margin-right: 18rpx;
        .mark {
          position: absolute;
          width: 62rpx;
          height: 36rpx;
          font-size: 24rpx;
          line-height: 36rpx;
          text-align: center;
          color: #fff;
          background-color: rgb(197, 163, 255);
          border-radius: 12rpx 0 12rpx 0;
        }
      }
    }
    .top-content {
      font-size: 28rpx;
      padding: 0 30rpx 42rpx;
      color: rgb(48, 49, 51);
      .top-ai {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 28rpx;
      }
      .top-material {
        border-radius: 8rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
      }
      .middle-items {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 96rpx;
      background-color: #fff;
      margin-top: 24rpx;
      border-radius: 16rpx;
      font-size: 30rpx;
      color: rgb(48, 49, 51);
      .uni-input{
        width: 400rpx;
        height: 38rpx;
        font-size: 28rpx;
        text-align: right;
        color: #909399;
      }
      .items-img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 13rpx;
        vertical-align: bottom;
      }
    }
    }
  }
}
.close {
  width: 100%;
  height: 108rpx;
  text-align: center;
  line-height: 108rpx;
  font-size: 32rpx;
  font-weight: 700;
  color: rgb(48, 49, 51);
  .close-btn {
    position: absolute;
    top: 30rpx;
    left: 30rpx;
    width: 48rpx;
    height: 48rpx;
  }
}
.popup-middle {
  overflow-y: scroll;
  box-sizing: border-box;
  width: 100%;
  height: 600rpx;
  padding: 30rpx;
  border-top: 1rpx solid rgb(220, 223, 230);
  border-bottom: 1rpx solid rgb(220, 223, 230);
  .font {
    display: inline-block;
    position: relative;
    width: 210rpx;
    height: 160rpx;
    background-color: rgba(142, 84, 244, 0.05);
    text-align: center;
    line-height: 210rpx;
    font-size: 32rpx;
    font-weight: 700;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color: rgb(254, 222, 9);
    border-radius: 12rpx;
    border: 2rpx solid #fff;
    margin: 0 25rpx 30rpx 0;
    &:nth-child(3n){
        margin-right: 0;
    }
    .font-img {
      width: 56rpx;
      height: 34rpx;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
.font-active {
  border: 2rpx solid rgba(142, 84, 244, 1) !important;
}
.verify {
  display: flex;
  height: 98rpx;
  align-items: center;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: rgb(144, 147, 153);
  white-space: nowrap;
  padding-bottom: 68rpx;
  .verify-btn {
    margin: 0;
    padding: 0;
    width: 596rpx;
    height: 88rpx;
    background-color: rgba(142, 84, 244, 1);
    border-radius: 8rpx;
    margin-left: 20rpx;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
    line-height: 88rpx;
  }
}
.popup-middle {
  overflow-y: scroll;
  box-sizing: border-box;
  width: 100%;
  height: 800rpx;
  padding: 30rpx;
  border-top: 1rpx solid rgb(220, 223, 230);
  border-bottom: 1rpx solid rgb(220, 223, 230);
  padding-bottom: 200rpx;
  .tim-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    .tim-voice{
      width: 618rpx;
      height: 124rpx;
      border-radius: 16rpx;
      background-color: rgb(249,249,249);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      box-sizing: border-box;
      border: 1px solid transparent;
      .tim-character{
        display: flex;
        align-items: center;
        font-size: 32rpx;
        .tim-name{
          width: 64rpx;
          height: 64rpx;
          background-color: rgb(142, 84, 244);
          border-radius: 50%;
          text-align: center;
          line-height: 64rpx;
          font-size: 20rpx;
          color: #fff;
          margin-right: 18rpx;
        }
      }
      .tim-play{
      font-size: 32rpx;
      font-weight: 500;
      color: rgb(142, 84, 244);
      
    }
    }
    
  }
  .ipt{
    width: 690rpx;
    height: 80rpx;
    margin: 30rpx 0;
    margin-top: 0;
    padding: 0 42rpx;
    background-color: rgb(249,249,249);
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 570rpx;
    }
    .texts{
        white-space: nowrap;
        .lines{
            margin-bottom: 30rpx;
            .column{
                display: inline-block;
                padding: 10rpx 36rpx;
                background-color: #000;
                color: #fff;
                font-size: 28rpx;
                margin-right: 30rpx;
                border-radius: 424rpx;
            }
        }
    }
    .active-ipt{
        border: 1px solid rgb(142, 84, 244) !important;
    }
}
.active-tem{
  border: 1px solid rgb(142, 84, 244) !important;
}
</style>

